<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>外边距</title>
        <style type="text/css">
            h5 {
                text-align: center;
            }
            .container {
                border: 1px solid blue;
                margin: 15px;
            }

            .wrapper {
                border: 1px solid green;
                margin: 15px;
            }

            .first>* {
                border: 1px solid gold;
                margin: 5px;
            }
            .second>* {
                /* 使元素以`内联元素`形式呈现 */
                display: inline;
                border: 1px solid purple;
                margin: 5px;
            }

            .third>* {
                border: 1px solid rgb(223, 0, 216);
                margin: 5px;
            }

            .fourth>* {
                display: block;
                border: 1px solid rgb(107, 104, 250);
                margin: 5px;
            }

            .fifth>*,
            .sixth>* {
                display: inline-block;
                width: 50px;
                height: 50px;
                border: 1px solid rgb(248, 113, 29);
                margin: 5px;
                text-align: center;
                font-size: 20px;
                line-height: 50px;
            }

            .seventh {
                min-height: 200px;
            }

            .seventh>div {
                display: none;
            }

            .seventh:hover>div {
                display: inline-block;
                width: 50px;
                height: 50px;
                border: 1px solid blue;
                margin: 5px;
                text-align: center;
                font-size: 20px;
                line-height: 50px;
            }
        </style>
    </head>
    <body>

        <h3>display</h3>
        <p>用于设置元素的内部显示类型 或 设置元素的外部显示类型</p>
        <p>元素的外部显示类型(outer display types)将决定该元素在<b>流式布局</b>中的表现（块级或内联元素）</p>
        <p>元素的内部显示类型(inner display types)可以控制其子元素的布局（例如：flow layout，grid 或 flex）</p>

        <div class="container">
            <h5>div默认就是块级元素</h5>
            <div class="wrapper first">
                <div>天</div>
                <div>地</div>
                <div>玄</div>
                <div>黄</div>
            </div> 
            <h5>让div以内联元素形式呈现</h5>
            <div class="wrapper second">
                <div>天</div>
                <div>地</div>
                <div>玄</div>
                <div>黄</div>
            </div> 
            <h5>span默认就是内联元素</h5>
            <div class="wrapper third">
                <span>天</span>
                <span>地</span>
                <span>玄</span>
                <span>黄</span>
            </div> 
            <h5>让span以块级元素形式呈现</h5>
            <div class="wrapper fourth">
                <span>天</span>
                <span>地</span>
                <span>玄</span>
                <span>黄</span>
            </div> 
            <h5>让span以 内联块(inline-block) 形式呈现</h5>
            <div class="wrapper fifth">
                <span>天</span>
                <span>地</span>
                <span>玄</span>
                <span>黄</span>
            </div> 
            <h5>让div以 内联块(inline-block) 形式呈现</h5>
            <div class="wrapper sixth">
                <div>天</div>
                <div>地</div>
                <div>玄</div>
                <div>黄</div>
            </div> 

            <div class="wrapper seventh">
                <div>天</div>
                <div>地</div>
                <div>玄</div>
                <div>黄</div>
                <p>婷婷是个好姑娘</p>
            </div>
        </div> 
        
    </body>
</html>